/** IT 运行资源部件
 * Author:      yangjq 
 * CreateTime:  2023/8/12 17:49:23 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:33:57 
 * Description: 
*/ 
<template>
  <div ref="echarsRef" :style="{width:props.width , height:props.height}" ></div>
</template>
<script setup lang="ts">
import { ref  , Ref , reactive , watchEffect} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

const props = defineProps(['width' , 'height']);

const echarsRef = ref<HTMLDivElement | null>(null);

const { setOptions, echarts, chartInstance} = useECharts(echarsRef as Ref<HTMLDivElement>,'dark');
  
let DeltValue = 0;  
const gaugeData = [
  {
    value: 20,
    maxValue: 20,
    name: 'CPU',
    title: {
      offsetCenter: ['-60%', '80%']
    },
    detail: {
      offsetCenter: ['-60%', '95%']
    }
  },
  {
    value: 40,
    maxValue: 40,
    name: '内存',
    title: {
      offsetCenter: ['-20%', '80%']
    },
    detail: {
      offsetCenter: ['-20%', '95%']
    }
  },
  {
    value: 60,
    maxValue: 60,
    name: '存储',
    title: {
      offsetCenter: ['20%', '80%']
    },
    detail: {
      offsetCenter: ['20%', '95%']
    }
  },
    {
    value: 80,
    maxValue: 80,
    name: '虚拟机',
    title: {
      offsetCenter: ['60%', '80%']
    },
    detail: {
      offsetCenter: ['60%', '95%']
    }
  }
];

const option = reactive({
  // title:{
  //   text:"资源运行",
  //   textVerticalAlign:'top',
  //   left:'center',
  //   top: 16,
  //   textStyle:{
  //     color:'#fff',
  //     textBorderWidth:'1',
  //     width:'100%',
  //     fontWeight:'400'
  //   }
  // },
  backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 10;
  },
  // grid:{
  //   containLabel:true,
  //   left:'30px',
  //   top:'42px',
  //   right:"30px",
  //   bottom:'10px',
  // },
  series: [
    {
      type: 'gauge',
      anchor: {
        show: true,
        showAbove: true,
        size: 18,
        itemStyle: {
          color: '#FAC858'
        }
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 8,
        length: '80%',
        offsetCenter: [0, '8%']
      },
      progress: {
        show: true,
        overlap: true,
        roundCap: true
      },
      axisLine: {
        roundCap: true
      },
      data: gaugeData,
      title: {
        fontSize: 12,
      },
      detail: {
        width: 40,
        height: 14,
        fontSize: 12,
        color: '#fff',
        backgroundColor: 'inherit',
        borderRadius: 3,
        formatter: '{value}%'
      }
    }
  ]
});

function initCharts() {
  setOptions(option);
}
initCharts();
setInterval(function () {
  DeltValue++;
  if(DeltValue>10){
    DeltValue = 0;
  }
  gaugeData[0].value = (gaugeData[0].maxValue * DeltValue / 10).toFixed(2);
  gaugeData[1].value = (gaugeData[1].maxValue * DeltValue / 10).toFixed(2);
  gaugeData[2].value = (gaugeData[2].maxValue * DeltValue / 10).toFixed(2);
  gaugeData[3].value = (gaugeData[3].maxValue * DeltValue / 10).toFixed(2);
  setOptions(option);
}, 1000);
</script>
<style>
</style>
